<template>
    <div class="box" v-if="searchShow">
        <div class="content">
            <ul class="contentUl">
                <li class="contentList">
                    <div class="contentLeft">
                        <!-- <span class="notNull">*</span> -->
                        <span class="contentLeftFont">部门</span>
                    </div>
                    <div class="contentRight">
                        <!-- <organization 
                            class="changeDep"
                            :selectDepartment="curDepartment"
                            @department_select="departmentSelected"
                            ref="department" :style="{color:departmentIdshow ? '#fff!important' : '#6f6f77!important'}">
                        </organization> -->
                        <div class="header">
                            <div class="header-content" @click="showTreeFn(true)">
                                <div class="name">{{curDepartment.departmentName?curDepartment.departmentName:"未选择"}}</div>
                                <span class="iconfont icon1">&#xe669;</span>
                            </div>
                        </div>
                    <transition name="slide">
                        <div class="dep_box" v-show="showTree">
                            <dep-tree  @changeId="change" @showTreeFn="showTreeFn" @initCurDepartment="initCurDepartment"></dep-tree>
                        </div>
                    </transition>
                    </div>

                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="contentLeftFont">设备名称</span>
                    </div>
                    <div class="contentRight cancelPos">
                        <device :deviceId="departmentId" @getDeviceData="getDevice" ref="devices" :style="{color:deviceIdshow ? '#fff!important' : '#6f6f77!important'}"></device>
                    </div>                    
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="contentLeftFont">部件名称</span>
                    </div>
                    <div class="contentRight cancelPos">
                       <parts :partsId="deviceId" @getPartsData ="getPartsData" ref="parts" :style="{color:partsIdshow ? '#fff!important' : '#6f6f77!important'}"></parts>
                    </div>

                    
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="notNull">*</span>
                        <span class="contentLeftFont">实际金额</span>
                    </div>
                    <div class="contentRight">
                    <input class="amount" type="text" v-model="minactualAmount" placeholder="请输入实际金额">-  
                    <input class="amount" type="text" v-model="maxactualAmount" placeholder="请输入实际金额">
                    <span v-if="actualAmount" style="color:#fff">元</span>
                    </div>
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <!-- <span class="notNull">*</span> -->
                        <span class="contentLeftFont">记录类型</span>
                    </div>
                    <div class="contentRight" style="margin-top:10px">
                            <Flexbox :gutter="15">
                                <FlexboxItem v-for="(item,index) in priorityData" :key="index">
                                    <span class="reType" :class="{'active':activeIndex == item.id}" @click="activeIndex = item.id">{{item.name}}</span>
                                </FlexboxItem>
                            </Flexbox>
                   
                    </div>
                </li>
            </ul>
        </div>
          <div class="footer">
              <div class="btn1" @click="reset">重置</div>
              <div class="btn2" @click="submit">确定</div>
          </div>
    </div>
</template>

<script>
import Organization from "../common/sellWorkOrderDepartment"
import fzPeople from "../common/sellWorkOrderPeople"
import device from "../common/device"
import parts from "../common/parts"
import type from "../common/type"
import DeviceDao from '../../daos/device_dao'
import { Flexbox, FlexboxItem } from 'vux'
import depTree from '@/components/common/tree'


export default {
    components:{
        Organization,
        fzPeople,
        device,
        parts,
        type,
        Flexbox,
        FlexboxItem,
        depTree
    },
    data(){
        return{
            searchShow:false,
            activeIndex:1,
            showTree:false,
            abandonedDialogVisible:false,
            departmentName:'',
            deviceName:'',
            componentName:'',
            listValue:0,
            departmentId:"",//部门id
            getSelectDevice:{},//获取设备
            getParts:{},//获取部件
            deviceId:"",//设备id
            partsId:"",//部件id
            type:"",//类型id
            departmentIdshow:false,
            selectPeopleIdshow:false,
            deviceIdshow:false,
            partsIdshow:false,
            url:'',
            curDepartment: {
                departmentName:'全企业',
                id:0
            },
            actualAmount:"",
            remark:"",
            workOrder:"",
            financeDetail:[],
            isAdd:true,
            priorityData:[
                {id:1,name:"新购"},
                {id:2,name:"维修"},
                {id:3,name:"更换"}
            ],
            minactualAmount:'',
            maxactualAmount:''

        }
    },
    //返回首页的公共方法
    inject: ["backToHomepage"],
    created() {
    },
    methods:{
        initCurDepartment(id, departmentName) {
            this.curDepartment = {
                departmentName,
                id: id
            }
        },
                showTreeFn(status) {
            // console.log(status)
            // if (status) {
            //     this.$refs.selece_icon.$el.style.transform = 'rotate(-180deg)'
            // } else {
            //     this.$refs.selece_icon.$el.style.transform = 'rotate(0deg)'
            // }
            this.showTree = status
        },
        change(id, departmentName) {
            this.curDepartment.id = id
            this.departmentId = id
            this.curDepartment.departmentName = departmentName
        },
        reset(){
            this.departmentId = ''
            this.partsId = ''
            this.deviceId = ''
            this.minactualAmount = ''
            this.maxactualAmount = ''
            this.activeIndex = 1
        },
        submit(){
            this.searchShow = false;
            this.$emit("searchData", {   
                departmentId:this.departmentId,
                partsId:this.partsId,
                deviceId:this.deviceId,
                minactualAmount:this.minactualAmount,
                maxactualAmount:this.maxactualAmount,
                type:this.activeIndex

            });
              
        },
        recovery() {
            window.scroll(0, 0);
        },
        spotCheckView(){
            history.back(-1)
        },
        // 点击完成的时候，获取部门数据
        departmentSelected: function(params) {
            if(!!params.id){
                this.curDepartment = params;
                this.departmentId = params.id;
                // 清空设备
                this.deviceId="";
                this.$refs.devices.selectdeviceData = "";

                // 清空部件
                this.partsId = "";
                this.$refs.parts.selectPartsName = "";
            } 
            else{
                this.departmentId = this.curDepartment.id
            }       
            if( this.departmentId < 0){
                this.departmentIdshow=false
            }else{
                this.departmentIdshow=true
            }
            /* this.getRecordsData();
            this.getToDealNum(); */
        },
         // 获取设备数据
        getDevice: function(data) {
            if(!!data.id){
                this.getSelectDevice = data;
                this.deviceId = data.id || null;
                 // 清空部件
                this.partsId = "";
                this.$refs.parts.selectPartsName = "";
            }
            if(data.id<0){
                this.deviceIdshow=false
            }else{
                 this.deviceIdshow=true
            }
        },
        // 获取部件的数据
        getPartsData: function(data) {
            if(!!data.id){
               this.partsId = data.id || null;
            }
            if(data.id<0){
                this.partsIdshow=false
            }else{
                 this.partsIdshow=true
            }
        },
        // 获取类型
        getPriorityData(data){
            if(!!data.id){
                this.type = data.id;
            }
        },
        // 统计最近七天处理的数量
        getRecordsData: function(){
            this.spotCheckMonth = [];
            //运维工单信息
            this.$http(this.$API.getCheckRecordByMonth, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.spotCheckMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    this.getReplaceData();
                }       
            })
        },
        // 获取点巡检和更换可操作的数量
        getToDealNum: function(){
            //点巡检设备数目
            this.$http(this.$API.getCheckConfigNum, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    this.spotCheckNum = res.count;
                    if(res.waitcount){
                        this.replaceExecutedNum = res.waitcount;
                    }
                }
            })
            //更换设备数目
            this.$http(this.$API.getReplaceConfigCount, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                this.replaceRecordNum = res.count;
                }
            })
        },

        getReplaceData: function(){
            this.replaceRecordMonth = [];
            this.$http(this.$API.getReplaceRecordByMonth, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.replaceRecordMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    // this.drawLine();
                }        
            })
        },
        cancel(){
            this.$router.go(-1)
        },
        submitHandle(){
            console.log('jiba')
            if(!this.isAdd){
                this.abandonedDialogVisible = true;
                return
            }
            if(this.type <= 0){
                this.$commom.alert("请选择类型再提交！");
                return false;
            }

            if(this.remark.length > 100){
                this.$commom.alert("备注最多可以填写100字！");
                return false;
            }
             let formData = { 
                  actualAmount: this.actualAmount,
                  componentId: this.isAdd ? this.partsId : '',//部件id
                  departmentId: this.departmentId,
                  deviceId: this.deviceId,
                  remark: this.remark,
                  thirdpartySourceId: this.workOrder,
                  type: this.type
              }

            DeviceDao.addFinancialRecord(formData,res => {
                console.log(res,'sss')
            })

              
        }
           
    },
}
</script>

<style lang="less" scoped>
.box{
    position: fixed;
    top:40px;
}
.reType{
display: inline-block;
text-align: center;
  background-color: #292A4D;
        width: 100%;
        color:#fff;
        border-radius: 3px;
    
}
.active{
    background-color: #456de6;
}
textarea::-webkit-input-placeholder{
    color: rgb(111, 111, 119) !important;
}
    
 textarea:-moz-placeholder {
     color: rgb(111, 111, 119) !important;
}

 textarea::-moz-placeholder {
     color: rgb(111, 111, 119) !important;
}
 textarea:-ms-input-placeholder {
    color: rgb(111, 111, 119) !important;
}
    *{
        padding: 0;
        margin: 0;
        list-style: none;
        border: none;
    }
    html,body{
        width: 100%;
    }
    .box{
        width: 100%;
        height: 100vh;
        background-color: #18182c;
    }
    .backHistory{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 
        line-height:40px;
        font-size:25px !important;
        margin-left:10px;
    }
    .pageTop{
        height: 40px;
        color: #fff;
        position: fixed;
        height: 40px;
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #22233f;
        z-index: 9;
        .sellWorkOrder_header_title{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
    }
    .content{
        width: 100%;
        height: 100%;
        overflow-y: auto; 
        padding: 0 15px;
        box-sizing: border-box;
        padding-top:40px;
        -webkit-overflow-scrolling: touch
    }
    .contentUl{
        width: 100%;
        height: 100%;
    }
    .contentList{
        padding: 15px 0;
        overflow: hidden;
        border-bottom: 1px solid #464656;
        touch-action: none;
    }
    .contentList:last-child{
        border: none;
        display: flex;
        margin-top: 20px;
        button{
            flex: 1
        }
    }
    .contentLeft,.contentRight{
        font-size: 17px;
    }
    .contentLeft{
        float: left;
        color: #ffffff;
    }
    .contentRight{
        position: relative;
        float: right;
        color: #8c8c96;
        box-sizing: border-box;
        margin-top: 3px;
    }
    .cancelPos{
        position: static;
        width: auto !important;
    }
    .notNull{
        color: #d81e06;
    }
    .contentList:nth-child(3) .contentRight{
        color: #ffffff;
        text-align: right;
    }
    .contentList:nth-child(4){
         border: none; 
        padding-bottom: 5px;
          .contentRight{
              display: flex;
              justify-content: center;
              margin-top: 10px;
              color:#8c8c96;
              line-height: 40px;
              text-align: left;
              .amount{
                  width: 45%;
                  padding-left: 25px;
                  font-size: 14px;
                color:#8c8c96;
                height: 40px;

                  &:first-child{
                      margin-right: 10px;
                  }
                  &:last-child{
                      margin-left: 10px;

                  }
              }

        }

    }
    .contentList:nth-child(4) .contentLeft,.contentList:nth-child(5) .contentLeft{
       width: 100%;
       float: unset;
    }
    .contentList:nth-child(5),.contentList:nth-child(4) {
        width: 100%;
        display: inline-block;
        .contentRight{
            width: 100%;
            float: unset;
            text-align: center;

        }
    }
    // .changeDep{
    //     position: absolute !important;
    //     top: 0 !important;
    //     right: 10px !important;
    // }
    .userQuestion{
        font-size: 17px;
        width: 100%;
        height: 100px;
        border-radius: 6px;
        padding: 10px;
        box-sizing: border-box;
        background-color: transparent;
        border: 1px solid #747480;
        color: #fff;
        text-align: left !important;
    }
    .userQuestion::-webkit-input-placeholder {
         color: #6f6f77;
         text-align: left; 
    }
    .subBtn{
        width: 80%;
        height: 40px;
        line-height: 1;
        padding: 13px 0;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto;
        border-radius: 13px;
        background-color: #456de6;
        color: #ffffff;
        margin: 0 4%;
        font-size: 17px;
        margin-top: 0;
    }
    .amount{
        text-align: right;
        color: #fff;
        padding-right: 10px;
        background-color: #292A4D;
    }
    .header {
    //   padding: 13px 0;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        // color:#fff;
        padding: 0 !important;
        .header-content {
            padding: 0 !important;
            width: 100%;
            display: flex;
            // align-items: center;
            justify-content: right;
            img {
            width: 5px;
            height: 11px;
            margin-left: 15px;
            }
        }
            .name{
        width: 100%;
        padding: 2px 0;
        // overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
    .icon1{
        margin-left: 5px;
    }
    }

.footer{
    position: fixed;
    bottom: 0;
    text-align: center;
    background-color: #292A4D;
    width: 100%;
    height: 50px;
    font-size: 14px;
    display: flex;
    line-height: 50px;
    touch-action: none;
    .btn1{
        border-top:1px solid #456de6;
        color: #456de6;
        width: 45%;
    }
    .btn2{
        width: 55%;
        height: 50px;
        background-color: #456de6;
        color:#fff;
    }
}
                .dep_box{
                        position: fixed;
                        width: 200px;
                        top: 125px;
                        right: 16px;
                        padding-right:16px;
                        background: rgb(40, 42, 77);
                        border-radius: 4px;
                        height: 250px;
                        overflow-y: scroll;
                        z-index: 9999999;
                        -webkit-overflow-scrolling:touch
                    }
</style>